//角色选择场景

import BackGround from "../running/background"; // 引入背景文件
import DataStore from "../base/DataStore";
import Sprite from "../base/Sprite";
import constant from "../utils/Constant";
import ShopScene from "../scene/ShopScene"
import FixedBackground from "../utils/fixedbackground";

//选择角色页面
export default class RoleSelectScene {
  constructor(ctx) {
    //声明一个选择角色的背景
    this.bg = new BackGround(ctx); // 背景
    this.ctx = ctx;
    this.loop();
    this.dataStore = DataStore.getInstance();
    this.ShopScene=  new ShopScene(ctx);
  }

  loop() {
    this.bg.drawToRoleCanvas(this.ctx);
    this.chooseRole();
  }

  //角色选择阶段绘制
  chooseRole() {
    //选择角色
    this.img_select_choose = Sprite.getImage("select_choose");
    this.imgSelectImg = new Sprite(this.img_select_choose, 95, 430, 120, 40);
    this.imgSelectImg.draw(this.ctx);
    //点击商店图标
    this.img_select_store = Sprite.getImage("select_store");
    this.imgSelectStore = new Sprite(this.img_select_store, 175, 60, 100, 80);
    this.imgSelectStore.draw(this.ctx);

    //点击宠物图标
    this.img_select_anim = Sprite.getImage("select_anim");
    this.imgSelectAnim = new Sprite(this.img_select_anim, 15, 60, 80, 80);
    this.imgSelectAnim.draw(this.ctx);

    this.bindEvent();
  }

  //绑定一个手势touch事件
  bindEvent() {
    let _this = this;

    wx.onTouchStart(e => {
      let x = e.touches[0].clientX,
        y = e.touches[0].clientY;

      if (
        x >= _this.imgSelectImg.x &&
        x <= _this.imgSelectImg.x + _this.imgSelectImg.width &&
        y >= _this.imgSelectImg.y &&
        y <= _this.imgSelectImg.y + _this.imgSelectImg.height
      ) {
        cancelAnimationFrame(_this.requestId);
        console.log("cancelAnimationFrame");
        this.dataStore.state = constant.RUNNING;
        this.dataStore.flag = true;
        console.log("status=" + this.dataStore.state);
        return;
      } else if (
        x >= _this.imgSelectStore.x &&
        x <= _this.imgSelectStore.x + _this.imgSelectStore.width &&
        y >= _this.imgSelectStore.y &&
        y <= _this.imgSelectStore.y + _this.imgSelectStore.height
      ) {
        _this.ctx.clearRect(0, 0, canvas.width, canvas.height);
        this.ShopScene.drawBg();
        console.log("click shop ...."+this.dataStore.state);
        return;
      }else if(
        x >= _this.imgSelectAnim.x &&
        x <= _this.imgSelectAnim.x + _this.imgSelectAnim.width &&
        y >= _this.imgSelectAnim.y &&
        y <= _this.imgSelectAnim.y + _this.imgSelectAnim.height
      ){
        console.log("click pet ....");
      }
    });
  }
}
